Gebruik het AI- assistentiepaneel voor styling om inzicht te krijgen in de algehele lay-out van een website, specifieke elementstijlen en om door AI gegenereerde oplossingen voor CSS-bugs te krijgen.
Open het paneel 'AI-assistentie'
Het AI- assistentiepaneel wordt geopend in de lade .
Vanuit het Elementenpaneel
Om AI-assistentie te openen vanuit het Elementenpaneel, klikt u bij het inspecteren van een DOM-knooppunt met de rechtermuisknop op het knooppunt en selecteert u de optie AI vragen .
Wanneer u AI-assistentie op deze manier opent, is het gecontroleerde DOM-element al vooraf geselecteerd als context-element voor het gesprek.
U kunt ook op de zwevende knop klikken die aan een zwevend DOM-knooppunt is gekoppeld.
Vanuit het commandomenu
Om AI-assistentie te openen via het opdrachtenmenu, typt AI en voert u vervolgens de opdracht AI-assistentie weergeven uit. Hiernaast ziet u de Lade- badge.
Vanuit het menu 'Meer hulpmiddelen'
U kunt ook in de rechterbovenhoek > Meer opties > Meer hulpmiddelen > AI-assistentie selecteren.
Gesprekscontext
Chats met AI-assistentie hebben altijd betrekking op het momenteel geïnspecteerde element, het laatst geselecteerde element in de DOM-boom van het Elementenpaneel. Een verwijzing naar dit element wordt weergegeven in de linkeronderhoek van het paneel.
Wijzig de context met behulp van de elementkiezer naast het huidige element of door een selectie te maken in de DOM-boom van het Elementenpaneel .
Met de geselecteerde context kunt u een screenshot van de viewport maken en deze naar uw chat verzenden. Klik op de knop Screenshot maken' naast het chatinvoerveld.
U kunt schermafbeeldingen gebruiken om extra visuele context aan uw prompts te geven, bijvoorbeeld om te controleren of alle zichtbare knoppen dezelfde afstand hebben.
Hoewel het momenteel geïnspecteerde element de basis van het gesprek vormt, heeft AI-ondersteuning toegang tot alle web-API's om meer informatie van de geïnspecteerde pagina te verzamelen. Dit omvat het raadplegen van andere elementen met document.querySelector of het evalueren van berekende stijlen.
Aanmoediging
Wanneer u een nieuw gesprek begint, biedt AI-assistentie voor styling voorbeeldprompts, zodat u snel aan de slag kunt.
Klik op een van de prompts om het invoerveld onderaan het paneel automatisch in te vullen.
U kunt er ook voor kiezen om uw eigen vraag of opdracht in het invoerveld te typen.
Om een prompt te versturen, drukt u op Enter of klikt u op de pijl aan de rechterkant van het invoerveld.
Gespreksstroom
Door een prompt te versturen, start het gesprek met de stylingagent. Om de informatie te verkrijgen die nodig is om je prompt zo goed mogelijk te beantwoorden, genereert en voert de agent JavaScript uit dat web-API's aanroept. De voortgang van de agent wordt in stappen weergegeven. De status van de eerste stap is Investigating… .
Het staplabel wordt bijgewerkt naarmate de agent specifiekere acties uitvoert om uw vraag op te lossen.
Zodra de agent een definitief antwoord heeft gegeven, wordt het antwoord onder de onderzoeksstappen weergegeven, inclusief suggesties voor vervolgvragen.
Klik op een van de voorgestelde vragen om het gesprek voort te zetten. Klik op de
van een onderzoeksstap om beter inzicht te krijgen in wat AI-assistentie achter de schermen doet.
Wanneer u een voortgangschip uitvouwt, ziet u de code die de agent heeft uitgevoerd, samen met de retourwaarde. Kopieer de uitgevoerde code voor later gebruik, bijvoorbeeld via het consolepaneel .
Gepauzeerde gesprekken
AI-assistentie kan code met bijwerkingen genereren. Wanneer dat gebeurt, wordt het gesprek onderbroken voordat de code wordt uitgevoerd.
Wanneer het gesprek wordt onderbroken, bekijk dan de code die de agent voorstelt. Klik op Doorgaan om door te gaan of op Annuleren om de uitvoering te voorkomen.
Wijzigingen in uw werkruimte opslaan
Met een gekoppelde werkruimtemap kunt u door AI voorgestelde stijlwijzigingen opslaan in CSS-bronbestanden op uw computer.
Om dit te doen:
Genereer eerst een metagegevensbestand en verbind een werkruimtemap .
U kunt er ook voor kiezen om handmatig een map toe te voegen .
Start een chat vanuit het Elementenpaneel .
Krijg snelle AI-assistentie om uw CSS aan te passen.
AI-assistentie kan code genereren en de uitvoering ervan pauzeren . Controleer de code en klik op Doorgaan om de wijzigingen live te testen.
Vouw de sectie Niet-opgeslagen wijzigingen uit en klik op Toepassen op werkruimte .
Controleer de wijzigingen in een
diffen klik op Alles opslaan .
Voor meer informatie over deze workflow, zie:
Geen antwoord gegeven
Het kan zijn dat AI-assistentie om verschillende redenen geen antwoorden biedt.
Als u denkt dat uw prompt iets is dat door AI-assistentie besproken zou moeten kunnen worden, meld dan een bug .
Gespreksgeschiedenis
Zodra u een gesprek begint, is elk volgend antwoord gebaseerd op uw eerdere interacties tussen u en de AI.
Dankzij AI-assistentie wordt uw gespreksgeschiedenis tussen sessies opgeslagen. Zo hebt u zelfs na het opnieuw laden van DevTools of Chrome nog toegang tot uw eerdere chats.
Gebruik de knoppen in de linkerbovenhoek van het paneel om uw gespreksgeschiedenis te beheren.
Begin opnieuw
Om een nieuw gesprek te beginnen met de momenteel geselecteerde gesprekscontext , klikt u op de knop .
Doorgaan
Als u een eerder gesprek wilt voortzetten, klikt u op de knop en selecteert u dit in het contextmenu.
Verwijderen
Om een gesprek uit de geschiedenis te verwijderen, klikt u op de knop .
Beoordeel antwoorden en geef feedback
AI-ondersteuning is een experimentele functie. Daarom zijn we actief op zoek naar uw feedback om te leren hoe we de kwaliteit van de antwoorden en de algehele ervaring kunnen verbeteren.
Stem antwoorden
Beoordeel een antwoord met de knoppen Thumbs up en Thumbs down onder het antwoord.
Antwoorden rapporteren
Om ongepaste inhoud te melden, klikt u op de naast de stemknoppen.